<template>
	<view class="wanl-list">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }"
			style="position:relative;padding:0 .75rem;position:relative;background:rgba(0,90,147,1);">
			<view class="cu-bar"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1" style="color:#fff"></text>
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input style="width:10px;" type="text" maxlength="20" confirm-type="search"
						placeholder-style="color: #ccc"
						:placeholder="searchKeywords ? searchKeywords : `搜索 ${searchTypeText[searchType]}`"
						@confirm="onSearchInputConfirmed" @input="onSearchInputChanged" focus />
					<!-- 删除输入框值 -->
					<img class="deletMsg" v-if="searchKeywords" src="@/static/delete_msg.svg" alt=""
						style="margin-right:0.75rem;" tapmode onclick="clearkeywords()">
				</view>
				<view tapmode @tap="$wanlshop.back(1)"
					style="width:80rpx;padding:0;margin-right:65rpx!important;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color: #ffffff;">
					取消
				</view>
			</view>
		</view>

		<div class="" v-if="keywords==''" style="font-family: PingFangSC-Regular;background-color:#fff;">
			<!-- 热门搜索 -->
			<div v-if="hot_keywords.length>0" class=""
				style="background-color:#fff;padding:0 .75rem;display:inline-block;width:100%;border-top:1px solid rgba(238,238,238,0.4);">
				<div style="color:#222222;font-weight:400;font-size:.75rem;padding-top:1rem;padding-bottom:.75rem;">
					热门搜索
				</div>
				<div class="" v-for="(vo,index) in hot_keywords"
					style="height:100%;display:inline-block;float:left;position:relative;">
					<span tapmode @click="quicksearch(vo.title)" class="tag-keyword" v-if="index==0"
						style="margin-left:0 !important;">{{vo.title}}</span>
					<span tapmode @click="quicksearch(vo.title)" class="tag-keyword" v-else>{{vo.title}}</span>
				</div>
			</div>
			<!-- 历史搜索 -->
			<div v-if="history_keywords.length>0" class="aui-border-b"
				style="background-color:#fff;padding:0 .75rem;display:inline-block;width:100%;">
				<div class="" style="color:#222222;font-weight:400;font-size:.75rem;padding:.75rem 0;">
					历史搜索
					<!-- <img tapmode onclick="del_allHistory()" style="float: right;width: 1.1rem;"
						src="../../image/btn/btn-delete-2.png" /> -->
				</div>
				<!-- {{history_keywords}} -->
				<div class="ming-bg-white" v-if="!is_search&&keywords==''">
					<div class="aui-list aui-list-noborder">
						<div v-for="(vo,index) in history_keywords" class="">
							<div class="" style="height:100%;display:inline-block;float:left;position:relative;">
								<!-- v-if="index==0" style="margin-left:0 !important;" -->
								<div class="tag-keyword" tapmode @click="quicksearch(vo)">
									{{vo}}
								</div>
								<div class="" v-if="index==0" tapmode @click="del_history(index)"
									style="display:inline-block;position:absolute;top:-.4rem;right:.3rem;">
									<!-- <img style="width: 0.8rem;" src="../../image/btn/btn-close-hui.png" /> -->
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="aui-clearfix"></div>
			</div>
		</div>
		<!-- :class="{ headtop: scrollStype }" -->
		<view class="head" style="margin-top:10px;">
			<view class="cue">

				<view class="bar" style="background-color: #fff;">
					<view class="item " :class="{ text_linear: filterIndex === 0 }" @tap="tabClick(0,'good')">商品</view>
					<view class="item " :class="{ text_linear: filterIndex === 1 }" @tap="tabClick(1,'xyx')">会员秀</view>
					<view class="item " :class="{ text_linear: filterIndex === 2 }" @tap="tabClick(2,'xx')">资讯</view>
					<!-- <view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
						<text>价格</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }" class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }" class="wlIcon-jiang"></text>
						</view>
					</view>
					<view class="item" @tap="showDrawer()">
						筛选
						<text class="wlIcon-shaixuan margin-left-xs "></text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 主体 -->

		<block v-if="filterIndex === 0">
			<!-- {{goodsData}} -->
			<wanl-product :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType" />
		</block>

		<block v-if="filterIndex === 1">

			<div class="list">

				<div class="list-item" v-for="(item, index) in goodsData" :key="index">
					<div class="user-info">
						<div class="pic">
							<image :src="item.avatar" mode="scaleToFill" />
						</div>
						<div class="flex-col">
							<div style="color: #2e2e2e;">{{ item.nickname }}</div>
							<div style="color: #b3b3b3;">{{ item.create_time }}</div>
							<!-- <div class="dot">
			                    <div class="dot-item"></div>
			                    <div class="dot-item"></div>
			                    <div class="dot-item"></div>
			                </div> -->
						</div>
					</div>
					<div style="color: #4d4d4d;" class="title">{{ item.good_name }}</div>
					<div style="color: #808080;" class="title">{{ item.content }}</div>

					<div class="image-list" v-if='item.img.length>0'>
						<image v-for="(v, i) in item.img" :key="i" :src="v" mode="scaleToFill" />
					</div>
					<!-- <div class="icon">
			            <div class="icon-item">
			                <image src="" mode="scaleToFill" />
			                222
			            </div>
			            <div class="icon-item">
			                <image src="" mode="scaleToFill" />
			                222
			            </div>
			            <div class="icon-item">
			                <image src="" mode="scaleToFill" />
			                222
			            </div>
			        </div> -->
				</div>
			</div>
		</block>
		<block v-if="filterIndex === 2">
			<!-- {{goodsData}} -->
			<div class="list">
				<div class="list-item" v-for="(item, index) in goodsData" :key="index">
					<!-- <div class="user-info">
						<div class="pic">
							<image :src="item.avatar" mode="scaleToFill" />
						</div>
						<div class="flex-col">
							<div style="color: #2e2e2e;">{{ item.nickname }}</div>
							<div class="dot">
								⭐️⭐️⭐️
							</div>
						</div>
					</div> -->
					<div style="color: #4d4d4d;" class="title">{{ item.create_time }}</div>
					<div style="color: #808080;" class="title">{{ item.content }}</div>
					<div class="image-list">
						<image v-for="(v, i) in item.img" :key="i" :src="v" mode="scaleToFill" />
					</div>
					<div class="remark" v-if="item.remark">{{ item.remark}}</div>
					<!-- <div class="tips">
						{{item.good_name}}
						<image src="" mode="scaleToFill" />
					</div> -->
				</div>
			</div>
		</block>

		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: 'good',
				page: 1,
				is_search: false,
				keywords: '',
				hot_keywords: [],
				history_keywords: [],
				search_keywords: [],
				sign_name: '',
				good_sign: '',
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				liststyle: 'col-1-10', //列表样式
				goodsData: [], //商品列表数据
				newsData: [],
				showRight: false,
				category: '',
				goodsType: 'goods',
				empty: '没有找到任何宝贝',
				params: {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				reload: false, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				searchType: 'goods',
				searchTypeText: {
					goods: '商品',
					groups: '资讯',
					find: '会员秀'
				},
				searchKeywords: '',
				isHistory: true, //历史记录&实时搜索
				searchList: {}, //热门搜索列表
				historyList: [], //历史记录列表
			};
		},
		onLoad(option) {
			if (option.type) {
				this.goodsType = option.type;
			}
			if (option.search) {
				//如果搜索存在
				this.params.search = option.search;
				this.drawerParams.search = option.search;
			} else if (option.data) {
				var data = JSON.parse(option.data);
				this.drawerParams.category_id = data.category_id;
				this.category = data.category_name;
				this.params.filter.category_id = data.category_id;
				this.params.op.category_id = 'in';
			} else {
				console.log('调试模式');
			}
			// 加载位置，后续版本开启加载写入全局
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	geocode: true,
			// 	success: mres => {
			// 		uni.request({
			// 			url: 'https://restapi.amap.com/v3/geocode/regeo',
			// 			data: {
			// 				key: this.$wanlshop.config('amapkey'),
			// 				location: mres.longitude + ',' + mres.latitude
			// 			},
			// 			success: res => {
			// 				if (res.statusCode == 200) {
			// 					let address = res.data.regeocode.addressComponent;
			// 					this.drawerData.sameCity.name = address.province;
			// 				}
			// 			}
			// 		});
			// 	}
			// });

			// this.get_sign();
			// this.loadData();
			// this.getList(); //会员秀
			this.searchList_init();
			this.get_list_searchKey()

			this.history_keywords = uni.getStorageSync('history_keywords');
			console.log(this.history_keywords)
			if (this.goodsData.length == 0) {
				// this.loadlikeData();
			}
		},
		// 监听上拉
		onPullDownRefresh() {
			this.params.page = 1;
			this.reload = true;
			this.searchList_init();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.searchList_init();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		// 监听返回
		onUnload() {
			if (this.showRight) {
				this.closeDrawer();
				return true;
			}
		},
		methods: {
			quicksearch(str) {
				this.keywords = str
				this.searchList_init()
			},
			// 存储历史数据
			setHistory(text) {
				// this.setSearch(text);
				// this.loadData(); //重新加载热门搜索
				let historyList = uni.getStorageSync('search:history');
				this.historyList = [];
				this.historyList = historyList; //重新加载历史记录
				let searchHistory = historyList;
				if (!searchHistory) searchHistory = [];
				let serachData = {};
				if (typeof text === 'string') {
					serachData = {
						keywords: text
					};
				} else {
					serachData = text;
				}
				// 判断数组是否存在，如果存在，那么将放到最前面
				for (var i = 0; i < searchHistory.length; i++) {
					if (searchHistory[i].keywords === serachData.keywords) {
						searchHistory.splice(i, 1);
						break;
					}
				}
				searchHistory.unshift(serachData);
				uni.setStorage({
					key: 'search:history',
					data: searchHistory
				});
			},
			// 清空历史数据
			removeHistory() {
				uni.showModal({
					title: '提示',
					content: '是否清理全部搜索历史？该操作不可逆。',
					success: res => {
						if (res.confirm) {
							this.historyList = [];
							uni.removeStorage({
								key: 'search:history'
							});
						}
					}
				});
			},
			onSearchInputChanged(event) {
				let value = event.detail.value;
				if (!value) {
					this.isHistory = true;
					return;
				} else {
					this.get_list_searchKey(value);
				}
			},
			onSearchInputConfirmed(event) {
				let value = event.detail.value;
				if (!value) {
					this.isHistory = true;
					if (this.searchKeywords) {
						this.keywordsToList(this.searchKeywords);
					} else {
						uni.showModal({
							title: '提示',
							content: '请输入内容。'
						});
						return;
					}
				} else {
					this.isHistory = true;
					uni.hideKeyboard();
					this.historyList = [];
					this.historyList = uni.getStorageSync('search:history');
					this.keywordsToList(value); //跳转列表页面
				}
			},
			// 跳转列表
			keywordsToList(keywords) {
				this.setHistory(keywords);
				this.keywords = keywords;
				// alert(this.keywords)
				this.searchList_init();
			},
			async get_list_searchKey() {

				await uni.request({
					url: `/api/search/searchKey`,
					success: res => {
						console.log(res.data)
						this.hot_keywords = res.data
					}
				});

			},

			async searchList_init() {
				// alert(this.keywords)
				let that = this;
				await uni.request({
					url: `/api/search/searchList`,
					data: {
						token: uni.getStorageSync("wanlshop:user").token,
						flag: this.flag,
						title: this.keywords,
						page: this.page,
						region_name: uni.getStorageSync("city_name"),
					},
					success: res => {
						console.log(res.data)

						this.page = 1;
						this.loadmore = true;
						this.goodsData = [];
						res.data.list.forEach(function(el) {
							that.goodsData.push(el)
						})
						// this.goodsList('good');
						this.status = 'noMore';
					}
				});

			},
			async get_sign() {

				await uni.request({
					url: `/api/good/goodsign`,
					success: res => {
						console.log(res.data)
						this.good_sign = res.data
					}
				});


			},


			//筛选点击
			tabClick(index, sign_name) {

				this.filterIndex = index;
				this.status = 'loading';
				this.params.page = 1;
				this.params.sign = sign_name;
				this.flag = sign_name;

				this.reload = true;
				this.searchList_init(this.flag);

				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			},

			search() {
				// this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, 'fade-in', 100);
			},
			editListstyle() {
				this.liststyle = this.liststyle == 'col-1-10' ? 'col-2-20' : 'col-1-10';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.deletMsg {
		position: relative;
		z-index: 1000;
	}

	.tag-keyword {
		font-size: 0.75rem !important;
		font-weight: 400 !important;
		padding: 0.3rem 0.75rem;
		border-radius: 0.4rem;
		background-color: #F6F6F6 !important;
		color: #333333;
		margin-bottom: 0.5rem;
		display: inline-block;
		margin-right: 0.7rem;
		position: relative;
	}

	.list {
		padding: 20rpx;
		box-sizing: border-box;

		&-item {
			background: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.user-info {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				position: relative;

				.flex-col {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.pic {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					background: #214a75;
					margin-right: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.dot {
					position: absolute;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
					display: flex;
					align-items: center;

					&-item {
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						margin-right: 10rpx;
						background: #999;
					}
				}
			}

			.remark {
				margin-top: 20rpx;
				background: #f5f5f5;
				color: #808080;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}

			.title {
				margin-top: 30rpx;
			}

			.image-list {
				display: flex;
				padding: 20rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #eee;

				image {
					width: 210rpx;
					height: 210rpx;
					margin-right: 20rpx;
				}
			}

			.tips {
				background: #f2f7fa;
				font-size: 26rpx;
				color: #005a93;
				height: 80rpx;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin-top: 20rpx;
				position: relative;

				image {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.icon {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;

				&-item {
					image {
						width: 34rpx;
						height: 34rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}


	.text_linear {
		font-weight: bolder;
		display: inline-block;
		height: 100%;
		/*color: #72D5EF;  颜色改不了*/
		font-size: .75rem;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: #005A93 !important;
		padding: 0 .2rem;
		border-bottom: .1rem solid #005A93;
		/* background:rgba(239,249,255,0.4); */
	}

	.cu-custom .search-form {
		// border: 3rpx solid #fe6600;
		background-color: #fff;
	}

	.cu-tag:not([class*="bg"]):not([class*="line"]) {
		background-color: #f7f7f7;
	}
</style>